import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue';
import postCssPxToRem from "postcss-pxtorem";
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    // postcss: {
    //   plugins: [
    //     postCssPxToRem({
    //       // rootValue: 37.5, // 设计图最大宽度除以10  //比如750的宽就写成75  我这边是1125的宽
    //       rootValue ({ file }) {
    //         // 如果是 Vant 的样式就按照 37.5 处理转换
    //         // 如果是我们自己的样式就按照 75 处理转换
    //         // console.log(file)
    //         return file.indexOf('vant') !== -1 ? 37.5 : 75
    //         // 这样做的好处是当拿到width为750px的设计稿是其中的内容width是
    //         // 多少就直接写多少即可，不用除以2了
    //       },
    //       propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
    //     })
    //   ]
    // },
    // css预处理器
    preprocessorOptions: {
      less: {
        // charset: false,
        // additionalData: '@import "./src/assets/mixin.less";',
      },
    },

    // 加上下边这部分 和最上边的导包，验证了一下，下边这部分在上边也没问题，即没有先后顺序
    postcss: {
      plugins: [
        postCssPxToRem({
            rootValue:37.5,   //1rem的大小
            propList:['*'],   //需要转换的属性
            selectorBlackList:[".norem"]     //过滤掉不需要转换的类名
        })
      ]
    },
  },

})

